<template>
<div id="step3">
    <div class="img_parent">
    </div>
    <div id="step3_msg">
        <p>请耐心等待</p>
        <p>小通正在努力查询</p>
    </div>
    <div class="weui-cells">
        <div class="weui-cell step_1">
            <div class="weui-cell__hd"><img src="../assets/img/renlianshibie_icon3.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>人脸识别</p>
            </div>
            <div class="weui-cell__ft">
                <div v-show="step==0" class="loader-inner ball-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div v-show="yzstep1" class="duiguo_parent">
                    <img class="duiguo" src="../assets/img/tg.png">
                </div>
            </div>
        </div>
        <div class="weui-cell step_2">
            <div class="weui-cell__hd"><img src="../assets/img/heimingdan_icon2.png" style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>黑名单</p>
            </div>
            <div class="weui-cell__ft">
                <div v-show="!yzstep1" class="step3_wait">待验证</div>
                <div v-show="step==1" class="loader-inner ball-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div v-show="yzstep2" class="duiguo_parent">
                    <img class="duiguo" src="../assets/img/tg.png">
                </div>
            </div>
        </div>
        <div class="weui-cell step_3">
            <div class="weui-cell__hd"><img src="../assets/img/renlianshibie_icon.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>银行卡、手机号核实</p>
            </div>
            <div class="weui-cell__ft">
                <div v-show="!yzstep2" class="step3_wait">待验证</div>
                <div v-show="step==2" class="loader-inner ball-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div v-show="yzstep3" class="duiguo_parent">
                    <img class="duiguo" src="../assets/img/tg.png">
                </div>
            </div>
        </div>
        <div class="weui-cell step_4">
            <div class="weui-cell__hd"><img src="../assets/img/dashuju_icon.png" alt="" style="width:20px;margin-right:5px;display:block"></div>
            <div class="weui-cell__bd">
                <p>大数据信用分</p>
            </div>
            <div class="weui-cell__ft">
                <div v-show="!yzstep3" class="step3_wait">待验证</div>
                <div v-show="step==3" class="loader-inner ball-beat">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div v-show="yzstep4" class="duiguo_parent">
                    <img class="duiguo" src="../assets/img/tg.png">
                </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
export default  {
    name: 'Process',  // 组件名称
    data:function  () {
        return {
            serverId:"",
            step:0,
            yzstep1:false,
            yzstep2:false,
            yzstep3:false,
            yzstep4:false,
            seralNo:""
        }
    },
    mounted:function  () {
//        this.wxUpload();
        this.youtuDetect();
    },
    methods:{ // 自定义方法，可对data进行处理
        //上传文件
        wxUpload:function (localId) {
            //    alert(appId);
            var _this = this;
            WeixinJSBridge.invoke('uploadVideo', {
                appId: appId,
                isShowProgressTips: 0,
                localId: _this.$store.state.localId
            }, function(res) {
                alert(JSON.stringify(res));
                if (res.err_msg === "uploadVideo:ok") {
                    _this.serverId = res.serverId;
                    //            alert("调试视频验证");
                    _this.youtuDetect();
                } else if (res.err_msg === "uploadVideo:cancel") {
                    alert("上传视频被取消");
                } else if (res.errMsg) {
                    alert("上传视频失败");
                }
            });

        },
        // 识别验证视频
        youtuDetect:function (interId) {
            var _this = this;
            if (this.step == 0 || this.seralNo == "") {
                this.seralNo = "342648762343_001_" + (new Date()).getTime();
            }
            var param = {
                pkId: "001",
                name: this.$store.state.userName, // 姓名
                idCard: this.$store.state.inputFrid, // 身份号
                phoneNo: this.$store.state.userPhone,
                bankNo: this.$store.state.bankNo, // 银行卡号
                step: this.step,
                interId: interId,
                seralNo: this.seralNo,
                serverId: this.serverId, // 上传文件是索引
                validate_data: this.$store.state.validateData,
                localId: this.$store.state.localId
            };
            $.ajax({
                type: 'post',
                dataType: "json",
                url: youTuDetectServlet,
                data: param,
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                success: function(queryData) {
        //        alert(youTuDetectServlet + window.step + ":" + JSON.stringify(queryData));

                    if (queryData && queryData.code == "0000") {
                        if(_this.step == 0){
                            _this.yzstep1 = true;
                        }else if(_this.step == 1){
                            _this.yzstep2 = true;
                        }else if(_this.step == 2){
                            _this.yzstep3 = true;
                        }else if(_this.step == 3){
                            _this.yzstep4 = true;
                        }
                        _this.$store.commit("pushValidata",queryData);
                        if (queryData.next == "1") {
                            _this.step++;
                            _this.youtuDetect(queryData.interId);
                        } else {
                            /*_this.step = 0;
                            location.hash = "/vresults";*/
                        }
                    } else if (queryData.code == "0012" || queryData.code == "0131") {
                        if (queryData.msg) {
/*                            $.alert(queryData.msg, "提示", function() {
                                showStepN(0);
                            });*/
                            _this.$store.commit("changeAlertContent",ueryData.msg);
                        } else {
/*                            $.alert("当前用户没有查询权限。", "提示", function() {
                                showStepN(0);
                            });*/
                            _this.$store.commit("changeAlertContent",ueryData.msg);
                        }
                        location.hash = "/";
                        _this.$store.commit("changeIsAlert",true);
//                        return;
                    } else if (queryData && queryData.code) {
                        _this.$store.state.validata[_this.step] = queryData;
/*                        _this.step = 0;
                        location.hash = "/vresults";*/
                    } else {
                        if (_this.step == 0) { // 人脸识别失败提示
                            if (queryData.resp_msg) {
                                location.href = "./fail.html?errorCode=" + queryData.resp_msg;
                            } else {
                                location.href = "./fail.html#1";
                            }

                        } else if (_this.step == 1) {
                            location.href = "./fail.html#2";
                        } else if (_this.step == 2) {
                            location.href = "./fail.html#3";
                        } else if (_this.step == 3) {
                            // 信用分计算
                            location.href = "./fail.html#4";
                        }

                    }
                },
                error: function(msg) {
                    var errorMsg = "查询失败";
                    if (step == 0) {
                        errorMsg = "人脸识别失败";
                    } else if (step == 1) {
                        errorMsg = "黑名单查询失败";
                    } else if (step == 2) {
                        errorMsg = "手机号、银行卡查询失败";
                    } else if (step == 3) {
                        errorMsg = "大数据信用分查询失败";
                    }
                    _this.step = 0;
                    _this.$store.commit("changeAlertContent",ueryData.msg);
                    _this.$store.commit("changeIsAlert",true);

                }
            });

        }
    }
}
</script>

<style lang='scss' scoped>
#step3{
    .img_parent {
        text-align: center;
        margin-top: 40px;
        width: 100%;
        height: 165px;
        background-image: url(../assets/img/naixindengdai_icon.png);
        background-size: content;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;

    }
    #step3_msg {
        text-align: center;
        font-size: 17px;
        margin: 15px auto;
    }
    .ball-beat > div {
        background-color: #2792e4;
        width: 12px;
        height: 12px;
    }

}
.loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 200px;
    align-items: center;
    justify-content: center;
}
.loader-inner{
    display: inline-block;
}
@-webkit-keyframes ball-beat {
    0% {
        opacity: 0.2;
        -webkit-transform: scale(0.55);
        transform: scale(0.75);
    }
    33%{
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ball-beat {
    50% {
        opacity: 0.2;
        -webkit-transform: scale(0.55);
        transform: scale(0.75);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.ball-beat > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    -webkit-animation: ball-beat 0.9s 0s infinite linear;
    animation: ball-beat 0.9s 0s infinite linear;
}

.ball-beat > div:nth-child(2) {
    -webkit-animation-delay: 0.3s !important;
    animation-delay: 0.3s !important;
    -moz-animation-delay: 0.3s !important;
}
.ball-beat > div:nth-child(3) {
    -webkit-animation-delay: 0.6s !important;
    animation-delay: 0.6s !important;
    -moz-animation-delay: 0.6s !important;
}

</style>
